<template>
  <!-- 柱状图-左右柱子 -->
  <div class="echartBar" ref="top2"></div>
</template>

<script>
export default {
  components: {},
  props: ['chartData'],
  data() {
    return {}
  },
  computed: {},
  watch: {
    chartData: {
      handler(val) {
        this.getEchartData();
      },
      deep: true,
    }
  },
  created() { },
  mounted() {
    this.getEchartData()
  },
  methods: {
    getEchartData() {
      let chart = this.$echarts.init(this.$refs.top2);

      const xData = this.chartData.map(item => item.label);
      const yData1 = this.chartData.map(item => item.value1);
      const yData2 = this.chartData.map(item => item.value2);
      console.log('bardataX::',xData);
      console.log('bardataY1::',yData1);
      console.log('bardataY2::', yData2);

      let option = {
        grid: [
          {
            top: "5%",
            bottom: "12%",
            width: "35%",
            left: "10%",
          },
          {
            top: "5%",
            bottom: "12%",
            width: "35%",
            left: "60%",
          }
        ],
        tooltip: {
          show: true,
          trigger: "axis",
          textStyle: {
            color: "#1D4A77",
          },
          axisPointer: {
            type: 'shadow',
          },
          backgroundColor: "rgba(255, 255, 255, 1)", //设置背景颜色
          borderColor: "transparent",
          confine: false,
          formatter: function (params) {
            var str = params[0].name;
            params.filter(function (item) {
              if (item.componentSubType == "bar") {
                str += "<br/>" + item.seriesName + "：" + item.value + '人';
              }
            });
            return str;
          },
        },
        xAxis: [
          {
            type: 'value',
            inverse: true,
            name: "人",
            interval: yData1.every(value => value <= 1)?1:yData1.every(value => value <= 100)?20:50,
            axisLine: {
              lineStyle: {
                color: "rgba(176, 222, 248, 1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#1D4A77",
                fontSize: "14px",
                align: "center",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(176, 222, 248, 1)",
                width: 0.6,
                type: "dashed",
              },
            },
          },
          {
            type: 'value',
            inverse: false,
            name: "人",
            gridIndex: 1,
            interval: yData1.every(value => value <= 1)?1:yData1.every(value => value <= 100)?20:50,
            axisLine: {
              lineStyle: {
                color: "rgba(176, 222, 248, 1)",
              },
            },
            axisLabel: {
              textStyle: {
                color: "#1D4A77",
                fontSize: "14px",
                align: "center",
              },
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(176, 222, 248, 1)",
                type: "dashed",
              },
            },
          }
        ],
        yAxis: [
          {
            position: 'right',
            type: 'category',
            data: xData,
            axisLabel: {
              show: true,
              padding: [0, 0, 0, 65],
              textStyle: {
                color: "#1D4A77",
                fontSize: "14px",
                align: "center",
              },
            },
            axisLine: { show: false },
            axisTick: { show: false },
            inverse: true,
          },
          {
            type: 'category',
            data: xData,
            axisLabel: {
              show: false,
              color: 'transparent'
            },
            axisLine: { show: false },
            axisTick: { show: false },
            inverse: true,
            gridIndex: 1,
          },
        ],
        series: [
          {
            name: '男性代表',
            type: "bar",
            data: yData1,
            barWidth: 18,
            barGap: "50%",
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "rgba(53, 161, 248, 0.3)", },
                { offset: 1,  color: "rgba(53, 161, 248, 1)", },
              ], false ),
            },
          },
          {
            name: '女性代表',
            type: "bar",
            data: yData2,
            barWidth: 18,
            barGap: "50%",
            yAxisIndex: 1,
            xAxisIndex: 1,
            itemStyle: {
              color: new this.$echarts.graphic.LinearGradient(0, 0, 1, 0, [
                { offset: 0, color: "rgba(228, 145, 72, 1)", },
                { offset: 1, color: "rgba(228, 145, 72, 0.3)", },
              ], false ),
            },
          },
        ]
      };
      chart.setOption(option);
      // 大屏适配
      window.addEventListener("resize", function () {
        chart.resize();
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.echartBar{
  width: 100%;
  height: 100%;
}
</style>